<%-- 
    Document   : view_only_report
    Created on : Apr 28, 2013, 12:56:49 PM
    Author     : fikri
--%>

<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>.: Observation : new report :.</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.10.2.custom.css" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.10.2.custom.js"></script>        
        <script type="text/javascript">
            $(function() {

                $("#tabs").tabs({active: $('#tabPosition').val()});

                if ($('.cb').length === 0) {
                    $('.send').hide();
                }
                $('.day_left').each(function(i) {
                    i++;
                    
                    var sts = $('#sts' +i).val();
                    var sts2 = $('#sts2_' +i).val();
                    if (sts !== '1') {
                        var oneDay = 24 * 60 * 60 * 1000;
                        var dc = $('#day_count' + i).val() === '' ? 0 : $('#day_count' + i).val();
                        var da = $('#day_add' + i).val() === '' ? 0 : $('#day_add' + i).val();
                        if (isNaN(da))
                            da = 0;
                        if (isNaN(dc))
                            dc = 0;
                        var d1 = new Date();
                        var d2 = new Date($('#ds').val());
                        var diffDays = Math.round(Math.abs((d2.getTime() - d1.getTime()) / (oneDay)));
                        var availableDay = (parseInt(dc) + parseInt(da) + 1) - diffDays;

                        $("#day_left" + i).text(isNaN(availableDay) ? 0 : availableDay);
                    } else {
                        $("#day_left" + i).text('0');
                    }
                   
                    
                    
                    if (parseInt($('#day_left' + i).text()) < 0) {
                        $(this).closest('tr').children('td,th').css('background-color', $('#severity_color' + i).val());
                    }
                });
                var frm = document.forms.form1;
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 400,
                    modal: true,
                    buttons: {
                        "Save": function() {

                            if ($('#_add').val() === '') {
                                alert('Please enter days !!');
                                $('#_add').focus();
                                return false;
                            }
                            $('#id').val($('#_id').val());
                            $('#add').val($('#_add').val());
                            frm.action = frm.action + '?addSeverityDays';
                            frm.submit();
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    }
                });

                $("#dialog-form-detail").dialog({
                    autoOpen: false,
                    height: 700,
                    width: 900,
                    modal: true,
                    buttons: {
                        Close: function() {
                            $(this).html('');
                            $(this).dialog("close");
                        }
                    }
                });

            });

            function updateRemark(id, val) {
                var url = '${pageContext.request.contextPath}/observation?updateStatusRemark&id=' + id + '&val=' + val;
                $.get(url,
                        function(data) {
                            if (data === '1') {
                                $('#msg').text('update success!!');
                                if (val === '1') {
                                    $('#edit_img_' + id).hide();
                                } else {
                                    $('#edit_img_' + id).show();
                                }
                            } else {
                                $('#msg').text('update failed!!');
                            }
                        }, "html");
            }

            function updateComment(id, val) {
                var url = '${pageContext.request.contextPath}/observation?updateComment&id=' + id + '&val=' + val;
                $.get(url,
                        function(data) {
                            if (data === '1') {
                                $('#msg').text('update success!!');
//                                $('#summary_' + id).text('');
                                if (val === '1') {
                                    $('#edit_img_' + id).hide();
                                } else {
                                    $('#edit_img_' + id).show();
                                }
                            } else {
                                $('#msg').text('update failed!!');
                            }
                        }, "html");
            }

            function editTask(id, add) {
                $('#_id').val(id);
                $('#_add').val(add);
                $("#dialog-form").dialog("open");
                return false;
            }

            function popupDetail(id) {
                $('#dialog-form-detail').html('');
                var url = '${pageContext.request.contextPath}/observation?taskDetailPopup&ids=' + id;
                $.get(url, function(data) {
                    $('#dialog-form-detail').html(data);
                });
                $("#dialog-form-detail").dialog("open");
            }

            function enable(id) {
                if ($('#cb' + id).is(':checked')) {
                    $('#sts' + id).removeAttr("disabled");
                    $('#comment' + id).removeAttr("disabled");
                } else {
                    $('#sts' + id).attr("disabled", "disabled");
                    $('#comment' + id).attr("disabled", "disabled");
                }

            }

            function validate() {
                var send = false;
                var comment = true;
                var id;
                $('.cb').each(function(i) {
                    if ($(this).is(':checked')) {
                        send = true;
                        id = $(this).attr('id').substring(2);
                        if ($('#comment' + id).val() === '') {
                            comment = false;
                            return;
                        }
                        return;
                    }
                });
                if (!send) {
                    alert('Please tick observation to be send');
                } else if (!comment) {
                    alert('Please insert comment');
                    $('#comment' + id).focus();
                    send = false;
                } else {
                    send = confirm('Are You Sure?');
                }

                return send;
            }

            function popupWin(id) {
                var url = '${pageContext.request.contextPath}/observation?viewDocsActionPlan&ids=' + id;
                var left = (screen.width / 2) - (1000 / 2);
                var top = (screen.height / 2) - (1000 / 2);
                var params = 'width=1000';
                params += ', height=1000';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }

            function popupWinHistory(id) {
                var url = '${pageContext.request.contextPath}/observation?viewHistoryFolderDoc&ids=' + id;
                var left = (screen.width / 2) - (1000 / 2);
                var top = (screen.height / 2) - (600 / 2);
                var params = 'width=1000';
                params += ', height=600';
                params += ', top=' + top;
                params += ', left=' + left;
                //params += ', fullscreen=yes';
                params += ', directories=no';
                params += ', location=no';
                params += ', menubar=no';
                params += ', resizable=no';
                params += ', scrollbars=yes';
                params += ', status=no';
                params += ', toolbar=no';
                newwin = window.open(url, 'PopUp', params);
                if (window.focus) {
                    newwin.focus();
                }
                return false;
            }

        </script>
    </head>
    <body>
        <s:errors/>
        <s:messages/>
        <s:useActionBean beanclass="exatrez.stripes.util.ListUtil" var="list"/>
        <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form1">
            <s:hidden name="tabPosition" id="tabPosition"/>
            <s:hidden name="observation.observationId"/>
            <s:hidden name="ss" id="ds" formatPattern="MM/dd/yyyy" formatType="date" value="${actionBean.observation.dateSubmit}"/>            
            <s:hidden name="observation.infoAudit.createId.userId"/>
            <div>

                <div id="page-title">
                    <span class="title">General</span>
                </div>   
                <table border="0" align="center" width="80%">
                    <tr>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Vessel</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="20%" style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.vessel.vesselName}&nbsp; 
                        </td>
                        <td width="16%" style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td width="13%" style="vertical-align: top; text-align: left;"><b>Master</b></td>
                        <td width="1%" style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td width="36%" style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameMaster}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Date Of Inspection</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            <fmt:formatDate value="${actionBean.observation.dateOfInspection}" pattern="dd/MM/yyyy"/>
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameChief}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;"><b>Location</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.location}&nbsp;
                        </td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>Chief Officer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameOfficer}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;"><b>2nd Engineer</b></td>
                        <td style="vertical-align: top; text-align: left;"><b>:</b></td>
                        <td style="vertical-align: top; text-align: left;">
                            ${actionBean.observation.nameEngineer}&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                        <td style="vertical-align: top; text-align: left;">&nbsp;</td>
                    </tr>
                </table>

            </div>           
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Executive Summary</a></li>
                    <li><a href="#tabs-2">Observation</a></li>
                        <c:if test="${actionBean.observation.acquired eq 'Y'}">
                        <li><a href="#tabs-3">Closing Action Plan</a></li>
                        <li><a href="#tabs-4">History Action Plan</a></li>
                        </c:if>
                </ul>
                <div id="tabs-1">
                    <p>
                        <label style="vertical-align: top">Summary 1 :</label>
                        <textarea rows="6" cols="80" readonly="true"><c:if test="${fn:length(actionBean.observation.summaryList) > 0}">
                                ${actionBean.observation.summaryList[0].summary}  
                            </c:if></textarea>
                    </p>
                    <p>
                        <label style="vertical-align: top">Summary 2 :</label>
                        <textarea rows="6" cols="80" readonly="true"><c:if test="${fn:length(actionBean.observation.summaryList) > 1}">
                                ${actionBean.observation.summaryList[1].summary}
                            </c:if></textarea>
                    </p>                    
                </div>
                <div id="tabs-2">
                    <p>
                        <display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">
                            <display:column title="OBS. ID." ><center>${line.observationTaskId}</center></display:column>
                            <display:column title="TITLE">
                            <a href="#" onclick="popupDetail('${line.observationTaskId}');
                                    return false;">
                                ${line.title}
                            </a>
                        </display:column>                                
                        <display:column title="SEVERITY" property="severity.severityName"/>
                        <display:column title="DAY COUNT" property="severityDayCount"/>
                        <display:column title="REMARKS" property="statusRemarks.statusRemarkName"/>                           
                    </display:table>
                    </p>                   
                </div>
                <c:if test="${actionBean.observation.acquired eq 'Y'}">                    
                    <div id="tabs-3">
                        <div id="msg"></div>
                        <s:hidden name="observationTask.observationTaskId" id="id"/>
                        <s:hidden name="observationTask.severityDayAdd" id="add"/>
                        <p>
                            <display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">
                                <display:column>
                                    <c:if test="${line.statusRemarks.statusRemarkCodeId ne '1' && line.statusSubmitMa ne '1'}">
                                        <s:checkbox value="${line.observationTaskId}" name="cb" id="cb${line_rowNum}" class="cb"/>
                                    </c:if>
                                </display:column>
                                <display:column title="Obs. ID" style="width:100px"><center>${line.observationTaskId}</center></display:column>
                                <display:column title="Title" property="title"/>                                
                            <!--display:column title="Severity Days" property="severityDayCount"/-->
                            <display:column title="Day Left">
                                 <div class="day_left" id="day_left${line_rowNum}"></div>
                                         <s:hidden name="dc" class="day_count" id="day_count${line_rowNum}" value="${line.severityDayCount}"/>
                                        <s:hidden name="da" class="day_add" id="day_add${line_rowNum}" value="${line.severityDayAdd}"/>
                                        <s:hidden name="sc" class="color" id="severity_color${line_rowNum}" value="${line.severity.severityColor}"/>
                                        <s:hidden name="sts" class="sts" id="sts${line_rowNum}" value="${line.statusRemarks.statusRemarkCodeId}"/>
                                        <s:hidden name="sts2" class="sts2" id="sts2_${line_rowNum}" value="${line.statusSubmitMa}"/>
                            </display:column>    
                            <display:column title="Added Days">
                                <center>
                                    <c:out value="${empty line.severityDayAdd ? 0 : line.severityDayAdd}"/>                                   
                                    <c:if test="${line.statusRemarks.statusRemarkCodeId ne 1 && line.statusSubmitMa ne '1'}">
                                        <a href="#" onclick="return editTask('${line.observationTaskId}', '${line.severityDayAdd}');">
                                            <img src="${pageContext.request.contextPath}/images/icon/edit.png" alt="edit" id="edit_img_${line.observationTaskId}"/>
                                        </a>
                                    </c:if>
                                </center>
                            </display:column>
                            <display:column title="Severity" property="severity.severityName"/>
                            <display:column style="text-align: left" title="Latest Action Plan"><span id="summary_${line.observationTaskId}">${line.summary}</span></display:column>
                            <display:column title="Evidence Photo" >
                                <c:if test="${!empty line.actionPlasFolder}">
                                    <a href="#" onclick="popupWin('${line.observationTaskId}');
                                            return false;">VIEW</a>
                                </c:if>                                
                            </display:column>
                            <display:column title="Remarks">
                                <c:choose>
                                    <c:when test="${line.statusRemarks.statusRemarkCodeId ne '1' && line.statusSubmitMa ne '1'}">
                                        <s:select name="${line.statusRemarksTemp.statusRemarkCodeId}" style="width:150px"  class="disabled" id="sts${line_rowNum}"
                                                  onchange="updateRemark('${line.observationTaskId}',this.value);" value="${line.statusRemarksTemp.statusRemarkCodeId}">
                                            <s:option value="">Please Choose</s:option>
                                            <s:options-collection collection="${list.statusRemarkList}" label="statusRemarkName" value="statusRemarkCodeId"/>
                                        </s:select>
                                    </c:when>
                                    <c:otherwise>
                                        ${line.statusRemarks.statusRemarkName}
                                    </c:otherwise>
                                </c:choose>


                            </display:column>    
                            <display:column style="text-align: left" title="Latest Comment">                        
                                <c:choose>
                                    <c:when test="${line.statusRemarks.statusRemarkCodeId ne '1' && line.statusSubmitMa ne '1'}">
                                        <s:textarea name="comment[${line_rowNum}]" rows="5" class="disabled" value="${line.maRemarksTemp}" id="comment${line_rowNum}" onchange="updateComment('${line.observationTaskId}',this.value);"/>
                                    </c:when>
                                    <c:otherwise>
                                        ${line.maRemarks}
                                    </c:otherwise>
                                </c:choose>

                            </display:column>
                        </display:table>
                        </p>
                        <p align="right">
                            <%--<s:submit name="sendToSuper" value="Save" id="create-task" class="btn"/>--%>
                            <s:submit name="sendToSuper" value="Send" class="btn send" onclick="return validate();"/>
                        </p>
                    </div>
                    <div id="tabs-4">
                        <!--                        <table class="tablecloth">
                                                    <tr>
                                                        <th>OBS ID.</th>
                                                        <th>Title</th>
                                                        <th>Closing Action Plan</th>
                                                        <th>Response Date</th>
                                                        <th>Comment From Ma</th>
                                                        <th>Remarks</th>
                                                    </tr>
                        <c:forEach items="${actionBean.observation.taskList}" var="item">
                            <c:set var="id" value="" />
                            <c:forEach items="${item.historyList}" var="history"><tr>
                                    <td>                                            
                                <c:if test="${id ne item.observationTaskId}">
                                    ${item.observationTaskId}
                                </c:if></td>
                            <td>${item.title}</td>
                            <td style="text-align: left">${history.actionPlanSummary}</td>    
                            <td><fmt:formatDate value="${history.responseDate}" pattern="dd/MM/yyyy hh:mm:ss aaa"/></td>
                            <td style="text-align: left">${history.remarks}</td>
                            <td>${history.statusRemarks.statusRemarkName}</td>
                        </tr>
                                <c:set var="id" value="${item.observationTaskId}" />
                            </c:forEach>                                    
                        </c:forEach>
                    </table>-->


                        <display:table class="tablecloth" name="${actionBean.observation.taskList}" requestURI="/observation?searchDraftReport" id="line">
                            <display:column title="OBS. ID" ><center>${line.observationTaskId}</center></display:column>
                                <display:column title="Title" property="title"/>
                                <display:column title="Action Plan">
                                    <display:table class="tablecloth" name="${line.historyList}" requestURI="/observation?searchDraftReport" id="line2">
                                        <display:column title="Closing Action Plan">
                                        <textarea rows="5" cols="60" readonly="true">${line2.actionPlanSummary}</textarea> <br/>
                                    </display:column>
                                    <display:column title="Response Date">
                                        <fmt:formatDate value="${line2.responseDate}" pattern="dd/MM/yyyy hh:mm:ss aaa"/> <br/><br/>                            
                                    </display:column>
                                    <display:column title="Doc. Upload">
                                        <c:choose>
                                            <c:when test="${fn:length(line2.folder.documents) > 0}">
                                                <a href="#" onclick="popupWinHistory('${line2.obsHistoryTask}');
                                                    return false;">VIEW</a>
                                            </c:when>
                                            <c:otherwise>
                                                -<br/><br/>
                                            </c:otherwise>
                                        </c:choose>
                                    </display:column>
                                    <display:column title="Comment From Ma" style="width:300px">
                                        <textarea rows="5" cols="40" readonly="true">${line2.remarks}</textarea><br/>
                                    </display:column>
                                    <display:column title="Remarks">
                                        ${line2.statusRemarks.statusRemarkName} <br/><br/>
                                    </display:column>
                                </display:table>
                            </display:column>
                        </display:table>
                    </div>
                </c:if>
            </div>
        </s:form>
        <div id="dialog-form-detail" title="Task Detail"></div>
        <div id="dialog-form" title="Tasks">


            <s:form beanclass="exatrez.stripes.action.ObservationAction" name="form2">
                <s:hidden name="observationTask.observationTaskId" id="_id"/>
                <p class="validateTips">All form fields are required.</p>
                <p>
                    <label>Add Severity Days :</label>
                    <s:text name="observationTask.severityDayAdd" id="_add" size="10px"/>
                </p>                               
            </s:form>
        </div>

    </body>
</html>